<template>
    <div>
        <table class="table table-bordered"> 
            <thead>

            <tr>
                <td>Id</td>
                <td>名称</td>
                <td>年龄</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in students" :key="item.id" >
            

                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
         
              
            </tr>
        </tbody>

          
        </table>
       
        <h1>出生地</h1>
        <select >
            <option value="">请选择</option>
            <option :value="item.id" v-for="item in select1" :key="item.id">{{ item.name }}</option>
           
        </select>
       <h1 v-for="(item,index) in students" :key="item.id">{{ item.id }}--{{ item.name }}</h1>
    </div>
</template>

<script setup lang="ts">


import { ref,reactive } from "vue";

let students=ref([
    {id:1,name:'张三',age:'20'},
    {id:2,name:'李四',age:'21'},
    {id:3,name:'王五',age:'22'},
    {id:4,name:'赵六',age:'25'},
])

let select1=ref([
    {id:1,name:'喝酒'},
    {id:2,name:'抽烟'},
    {id:3,name:'睡觉'},

])


</script>




<style scoped>

</style>